<template>
	<view class="dmm-container dmm-container-grey">
		<view class="section summary">
			<image src="/static/imgs/icon_money.png" mode=""></image>
			
			<text class="text text-content title">我的业绩</text>
			<view class="balance">
				<text class="symbol">¥</text>
				<text class="num">{{balance | toFixed2}}</text>
			</view>
			
			<u-button type="primary" text="提现" @click="uniHistory.push('/pages/withdrawals/index')"></u-button>
			
			<text class="text text-primary" @click="uniHistory.push('/pages/income/balanceRecords')">余额变动明细</text>
		</view>
		
		<view v-for="(item, index) in incomeList" :key="index" class="section incomeList">
			<u-cell-group :border="false">
				<u-cell class="header">
					<view slot="title" class="u-cell__title">
						<text v-if="index === 0" class="text-b">本月收益</text>
						<text v-else class="text-b">{{item.month | slice(-2)}}月收益</text>
					</view>
					<view slot="value" class="u-cell__value">
						<text class="text text-primary text-b">{{item.totalProfit | toFixed2}}元</text>
					</view>
				</u-cell>
				
				<u-cell title="直营收益">
					<view slot="value" class="u-cell__value">
						<text class="text text-b">{{item.retailRevenueProfit | toFixed2}}元</text>
					</view>
				</u-cell>
				<u-cell title="渠道收益">
					<view slot="value" class="u-cell__value">
						<text class="text text-b">{{item.channelProfit | toFixed2}}元</text>
					</view>
				</u-cell>
			</u-cell-group>
		</view>
		
		<view v-if="!hasData" class="tip">
			<text class="text text-tip">- 到底了 -</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from "vuex"
	
	export default {
		data() {
			return {
			};
		},
		
		computed: {
			...mapState('home', ['agentInfo']),
			...mapState('income', ['incomeList', 'balance', 'pageNum', 'hasData']),
		},
		
		methods: {
			...mapActions('income', ['getIncomeList', 'getBalance']),
		},
		
		onReachBottom() {
			const {agentNo} = this.agentInfo
			this.hasData && this.getIncomeList({agentNo, pageNum: this.pageNum + 1})
		},
	
		created() {
			const {agentNo} = this.agentInfo
			
			console.log(agentNo)
			this.getIncomeList({agentNo})
			this.getBalance({agentNo})
		},
	}
</script>

<style lang="scss">
	.dmm-container {
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}
	.summary {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0 40rpx;
		
		.title {
			margin-bottom: 16rpx;
		}
		
		.balance {
			margin-bottom: 10rpx;
			.symbol {
				font-size: 48rpx;
				font-weight: 700;
				margin-right: 6rpx;
				position: relative;
				bottom: 16rpx;
			}
			.num {
				font-size: 72rpx;
			}
		}
		
		.u-button {
			width: 472rpx !important;
			margin-bottom: 30rpx;
		}
		image {
			position: absolute;
			height: 42rpx;
			width: 42rpx;
			top: 25rpx;
			right: 25rpx;
		}
	}
	
	.incomeList {
		padding: 0;
		.u-cell {
			&.header {
				background-color: #fbfbfb;
				border-top-right-radius: $uni-border-radius-lg;
				border-top-left-radius: $uni-border-radius-lg;
				/deep/ .u-line {
					display: none;
				}
			}
			
			/deep/ .u-cell__body {
				padding: 28rpx 30rpx;
			}
			
			/deep/ .u-line {
				width: 630rpx !important;
				margin-left: 30rpx !important;
			}
		}
	}
	
	.tip {
		text-align: center;
	}
</style>
